<template>
    <div class="home">
        <!-- <div class="lightLine">
            12456987
        </div> -->
        <div class="two">
            <div class="three" v-for="(item, index) in items" :key="index" ref="three"></div>
        </div>

    </div>
</template>

  <script>
export default {
    name: 'home',
    data() {
        return {
            items: 800,
            distance: 800
        }
    },
    mounted() {
        const starArr = this.$refs.three
        starArr.forEach(item => {
            const speed = 0.2 + (Math.random() * 1)
            const thisDistance = this.distance + (Math.random() * 260)
            item.style.transformOrigin = `0 0 ${thisDistance}px`
            item.style.transform = `translate3d(0, 0, -${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed})`
        })
    }
}
  </script>
  <style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.home {
    position: relative;
    width: 100%;
    height: 100vh;

    //   background: radial-gradient(260% 67%  at bottom center,  #80DEEA 10%,  #CE93D8 40%,  #00838F 65%, #263238 130%);

    overflow: hidden;
    z-index: 0;
    position: absolute;
    .lightLine {
        width: 300px;
        height: 100px;
        // background: #0e96e7;
        // width: 400px;
        height: 40px;
        position: relative;
        overflow: hidden;
        // width: 100vw;
        // height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #282c34;
        z-index: 10;

    }
    .lightLine::before {
        content: "";
        position: absolute;
        height: 4px;
        width: 80px;
        background: linear-gradient(to left, #f00, #fff);
        animation: left_to_right  4s 0s infinite;
    }

    @keyframes left_to_right  {
        0% {
            left: -80px;
        }

        100% {
            left: calc(100% + 80px);
        }
    }
}

.two {
    position: absolute;
    left: 50%;
    transform-style: preserve-3d;
    transition: perspective(500deg);
    perspective-origin: 50% 100%;
    -webkit-perspective-origin: 50% 100%;
    -moz-perspective-origin: 50% 100%;
    animation: xinkon 90s linear infinite;
    bottom: -100px;

    .three {
        width: 2px;
        height: 2px;
        background: #fff9c4;
        position: absolute;
        top: 0;
        left: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
    }
}
@keyframes xinkon {
    0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }
    100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
            rotateY(-360deg);
    }
}
</style>

